<template>
	<view>
		<view v-for="(item,i) in items" :key="item.id">
			<!-- 轮播动画 -->
			<view v-if="item.type == 'banner'">
				<swiper indicator-dots="true" autoplay="true" interval ="5000" duration="2000" :style="{'height': item.style.heightimage + 'rpx'}">
					<swiper-item v-for="(img ,j) in item.data" :key="j" >
						<image  mode="aspectFit" :src="img.imgUrl"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 搜索框 -->
			<view v-if="item.type == 'search'">
				<uni-search-bar @confirm="search" :placeholder="item.params.placeholder"></uni-search-bar>
			</view>
			<!--公告-->
			<view v-if="item.type =='notice'">
				<uni-notice-bar scrollable="true" single="true" customIcon="true" :customIconSrc="item.params.icon" :text="item.params.text"  :backgroundColor="item.style.background" :color="item.style.textColor"></uni-notice-bar>
			</view>
			<!-- 导航按钮 -->
			<view v-if="item.type == 'navBar'" class="navBar">
				<view v-for="(btn,j) in item.data" :key="j" class="navBar_item" @click="navBar(btn.linkUrl)">
					<image :src="btn.imgUrl" class="navBar_item_img"></image>
					<text class="navBar_item_title" :style="{color:btn.color}">{{btn.text}}</text>
				</view>
			</view>
			<!-- 视频组 -->
			<view v-if="item.type == 'video'" class="video">
				<video style="width: 100%;padding 20rpx 20rpx;" :poster="item.params.poster" :src="item.params.videoUrl"></video>
			</view>
			<!-- 辅助线 -->
			<view v-if="item.type ==='guide'">
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	
	export default {
		components:{
			uniSearchBar,
			uniNoticeBar
		},
		data() {
			return {
				items:{},
			}
		},
		
		onLoad() {
			
			//请求
			let _this = this;
			this.$api.request({
				url:'/page/home',
			}).then((res)=>{
				if(res.data.code == 1){
					_this.items = res.data.data.items;
					//console.log(JSON.stringify(_this.items));
					
					uni.setNavigationBarTitle({
						title:_this.items.page.params.title,
					})
					
					uni.setNavigationBarColor({
						backgroundColor:_this.items.page.style.titleBackgroundColor,
						frontColor:_this.items.page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					})
				}
			}).catch((err)=>{
				console.log('request fail', err);
			});
			
			//console.log(getApp().globalData.baseUrl);
			//console.log(getApp().globalData.app_id);
		},
		onPullDownRefresh() {
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},3000)
			
		},
		methods: {
			search(e){
				console.log(e.value);
			},
			
			navBar(e){
				console.log(e);
				if( e != ''){
					uni.navigateTo({
						url:e,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.navBar{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 10rpx 50rpx;
		.navBar_item{
			flex: 1;
			display: flex;
			flex-direction: column;
			.navBar_item_img{
				--position: relative;
				width: 90rpx;
				height: 90rpx;
			}
			.navBar_item_title{
				--position: relative;
				font-size: 20rpx;
				padding: 10rpx 0 10rpx 0;
			}
		}
	}
	

    .line{
        border-bottom: 1px solid #000000;
        width: 95%;
		margin:20rpx 20rpx;
	}
	
	.video{
		padding: 20rpx 20rpx;
	}
</style>
